<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

    <title>Port layouts demo</title>

    <style>
        .joint-paper {
            border: 1px solid gray;
            width: 800px
        }
    </style>
</head>
<body>

<script src="../../build/joint.js"></script>

<script>
    /**
     * HELPERS
     */
    function createPaper() {
        var graph = new joint.dia.Graph({}, { cellNamespace: joint.shapes });
        var div = document.createElement('div');
        document.body.appendChild(div);
        return new joint.dia.Paper({
            el: div,
            width: 800,
            height: 400,
            gridSize: 1,
            defaultAnchor: { name: 'perpendicular' },
            model: graph,
            cellViewNamespace: joint.shapes,
        });
    }
</script>

<script src="./port-layouts-defaults.js"></script>

<h2>Port layouts</h2>
<script src="./port-layouts.js"></script>

<h2>Labels</h2>
<script src="./port-layouts-labels.js"></script>

<h2>Z index</h2>
<script src="./port-z-index.js"></script>

<h2>Port rotation compensation</h2>
<script src="./port-layouts-comp.js"></script>

<h2>Port Snapping</h2>
<script src="./port-snap.js"></script>
<div>Try to connect the link to the element.</div>

</body>
</html>
